<template>
  <div class="q-pa-md q-gutter-sm">
    <t-button @click="ceshi">123</t-button>
    <t-tree
      ref="fasr_tree160952"
      style="opacity: 100%"
      class="fasr_tree160952"
      :noConnectors="true"
      :defaultExpandAll="true"
      :lazyModel="false"
      nodeKey="id"
      labelKey="label"
      childrenKey="children"
      :nodes="tree233"
      v-model:selected="selected"
      v-model:ticked="ticked"
      @update:selected="Selected"
      @update:ticked="Ticked"
      @nodeClick="nodeClick"
      tick-strategy="leaf"
    >
    </t-tree>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue';
export default {
  setup() {
    const fasr_tree160952 = ref();
    let tree233 = ref([]);
    onMounted(() => {
      console.log(fasr_tree160952, 'fasr_tree160952');
      let test = fasr_tree160952.value.getNodeLevelByKey(2);
      console.log(test, 'test');
      tree233.value = []
      setTimeout(() => {
        tree233.value = [

            { id: 5,
            label: '一级 2',
              img:'map',
              children: []},
            {
              id: 1,
              label: '一级 1',
              children: [
                {
                  id: 2,
                  label: '二级 1-1',
                  children: [{ id: 3, label: '三级 1-1-1' }],
                },
                { id: 4, label: '二级 1-2' },
              ],
          }
          ]
      },500)
    });
    return {
      fasr_tree160952,
      simple: [
        {
          label: 'Satisfied customers (with avatar)',
          avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
          children: [
            {
              label: 'Good food (with icon)',
              icon: 'restaurant_menu',
              children: [
                { label: 'Quality ingredients' },
                { label: 'Good recipe' },
              ],
            },
            {
              label: 'Good service (disabled node with icon)',
              icon: 'room_service',
              disabled: true,
              children: [
                { label: 'Prompt attention' },
                { label: 'Professional waiter' },
              ],
            },
            {
              label: 'Pleasant surroundings (with icon)',
              icon: 'photo',
              children: [
                {
                  label: 'Happy atmosphere (with image)',
                  img: 'https://cdn.quasar.dev/img/logo_calendar_128px.png',
                },
                { label: 'Good table presentation' },
                { label: 'Pleasing decor' },
              ],
            },
          ],
        },
      ],
      tree233,
      selected: ref(''),
      ticked: ref([4]),
      Selected(target) {
        console.log(target);
      },
      Ticked(target) {
        console.log(target);
      },
      ceshi() {
        console.log(fasr_tree160952.value.getTickedNodes());
      },
      nodeClick(val) {
        console.log(val,'nodeClick');
      }
    };
  },
};
</script>
